<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title>分店管理-首页</title>
	<link rel="stylesheet" href="/js/plugin/layui-v2.3.0/layui/css/layui.css">
	<link rel="stylesheet" href="/css/reset.css">
	<link rel="stylesheet" href="/css/index.css">
	<link rel="stylesheet" href="/css/index_team.css">
	<script src="/js/jquery-2.1.1.min.js"></script>
	<script src="/js/plugin/layui/layui.js"></script>
</head>
<style>
	html,body{
		height:auto;
	} 
</style>
<body>
		<div class="layui-tab-content " id="teamList">
			<table class="layui-hide" id="LAY_table_staff" lay-filter="staff"></table> 
			<script id="sex" type="text/html">
							  	{{# if(d.sex==0){ }}
									男
								{{#  }else{     }}
									女  
								{{#  }     }}
			</script>
			<script id="name" type="text/html">
				<span data-id="{{d.id}}" class="dotted" style="background:#da6068">{{d.name.substr(0,1)}}</span><span>{{d.name}}</span>
			</script>
			<script id="Bar" type="text/html">
	  					<div class="cop-wrap">
							<a  href="javascript:void(0)" onclick="editstaff('{{d.id}}',event)"><i class="layui-icon icon-settings">&#xe642;</i></a>
							<a  href="javascript:void(0)" onclick="delstaff('{{d.id}}',event)"><i class="layui-icon icon-settings">&#xe640;</i></a>
						</div>
					</script>
			</div>
	<input type="hidden" id="teamId" name="teamId" th:value="${id}" />
</body>
<script>
var teamId = $("#teamId").val();
var table;
$(function(){
	
	layui.use(['element','table','layer'], function(){
	  var element = layui.element;
	  table = layui.table;
	  element.on('tab(docNavTabBrief)', function(){
		  var target=$(this),index=$(this).index();
		  
	  });
	//方法级渲染
		table.render({
			id:'staff',
		    elem: '#LAY_table_staff',
		    url: '/app/customerStaff/listdata',
		    cols: [[
		      {field:'name',toolbar:'#name', align:'left', title: '姓名',width:'20%'}
		      ,{field:'sex',toolbar:'#sex' , align:'left', title: '性别',width:'4.6%'}
		      ,{field:'post', align:'left', title: '职务',width:'5%'}
		      ,{field:'fkDicSkill', align:'center', title: '技能',width:'14%'}
		      ,{field:'created', align:'center', title: '入驻时间',width:'10%'}
		      ,{field:'phone', align:'left', title:'联系方式',width:'8%' }
		      ,{field:'gongwei', align:'left', title:'工位',width:'22%' }
		      ,{field:'caozuo',toolbar: '#Bar', align:'center', title:'',width:'10%' }
		    ]]
		    ,page: true
		    ,where: {
	        	params:{teamId:teamId}
	        }
			,done:function(){
				setHeight()
	        }
		});
		tableBtnOpt();
	});
	
	
})
function tiaozhuan(id){
	var iframeSrc='/app/customerStaff/details/'+id;
	var iframe = document.createElement('iframe');//动态创建iframe，禁止iframe的src回退；
    iframe.src = iframeSrc;
    iframe.width = '100%';
    iframe.height = '100%';
    iframe.id = 'project-iframe';
    parent.parent.$(".iframe-wrap").html($(iframe));
}
function tableBtnOpt(){
	var $mylist = $("#LAY_table_staff").next('.layui-table-view').find('.layui-table-body table.layui-table');
	/*  点击tr元素,跳转详情基于table*/
	  $mylist.on("click",'tr',function(){
			var targetI=$(this);
			var id=$(targetI).children('td').find("span[data-id]").attr("data-id");
			console.log(id);
			tiaozhuan(id);
			return false;
	  }); 
}
function editstaff(id,event){
	preventBubble(event);//阻止事件冒泡即可，点击tr的
	parent.parent.parent.layer.open({
		title : [ '编辑会员'],
		type : 2,
		area : ['700px','90%'],
		shade : [0.6, '#010101'],
		content : [ "/app/customerStaff/edit/"+id, 'no' ],
		end: function () {
			table.reload('staff');
	      }
	});
}
function delstaff(id,event){
	preventBubble(event);//阻止事件冒泡即可，点击tr的
	parent.parent.parent.layer.confirm('确认要删除吗，删除后不能恢复', function(index){
    	//发送删除请求
    	$.post("/app/customerStaff/delete",{id:id},function(res){
    		if(res.success){
    			layer.msg(res.msg);
    		}else{
    			layer.msg(res.msg);
    		}
    		parent.parent.parent.layer.close(index);
    		table.reload('staff');
        },"json");
  	});	
}
/* 阻止事件冒泡 */
function preventBubble(event){ //取消事件冒泡
	  var e=arguments.callee.caller.arguments[0]||event; //若省略此句，下面的e改为event，IE运行可以，但是其他浏览器就不兼容  
	  if (e && e.stopPropagation) {  
	    e.stopPropagation();  
	  } else if (event) {  
	    event.cancelBubble = true;  
	  }  
}
/* 根据iframe的内容撑开iframe的容器 */
function setHeight(){
    var h = document.body.offsetHeight*1;
    window.parent.parentHeight(h);
}
</script>
</html>